:root {
  --primary: #3563EE;
  --orange: #F36D37;
  --light-orange: #FFC5AD;
  --secondary: #B4FF33;
  --light-green: #E7FFBD;
  --black: #000;
  --black-light: #121212;
  --gray-light: #727272;
  --white: #ffffff;
}

.box-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

.wrapper {
  float: left;
  width: 100%;
  max-width: 2000px;
  position: relative;
}

/* Global Class */
.width-100,
.width-50 {
  float: left;
}

.width-100 {
  width: 100%;
}

.width-50 {
  width: 50%;
}

.img-cover {
  object-fit: cover;
  object-position: center;
}

.image-cover {
  object-fit: cover;
  object-position: center;
}

.image-contain {
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

.relative {
  position: relative;
}


.lazy-section {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

.lazy-section.visible {
    opacity: 1;
    transform: translateY(0);
}

.loader-overlay {
    position: fixed;
    z-index: 9999;
    inset: 0;
    background: #ffffff; /* bisa diganti sesuai tema */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .3s ease;
}

.loader-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

/* ANIMASI LOGO */
.logo-loader {
    width: 90px;     /* Ubah sesuai ukuran logo */
    opacity: 0.15;
    animation: logoPulse 1.6s ease-in-out infinite;
}

@keyframes logoPulse {
    0%   { opacity: 0.15; transform: scale(0.95); }
    50%  { opacity: 1;    transform: scale(1.05); }
    100% { opacity: 0.15; transform: scale(0.95); }
}


@media screen and (min-width: 2001px) {
  .wrapper {
    max-width: 2200px;
  }
}
@media screen and (min-width: 2201px) {
  .wrapper {
    max-width: 2500px;
  }
}